<template>
  <div>
    <el-scrollbar>
      <el-row v-loading="loading">
        <el-col :span="24">
          <reserset-edit
            ref="resersetEdit"
            v-on:save-finished="getreservationList"
          ></reserset-edit>
          <role-permission ref="rolePermission"></role-permission>

          <el-row class="search-row">
            <!-- <el-col :span="18">
              <el-input size="small" v-model="search.value"> </el-input>

              <el-button
                type="primary"
                size="small"
                @click="getreservationList()"
                >选择文件
                </el-button
              >

              <el-button
                type="primary"
                size="small"
                v-show="true"
                @click="handleCreateSport()"
                >批量导入</el-button
              >

              <el-button
                type="primary"
                size="small"
                v-show="true"
                @click="handleCreateSport()"
                >模板导出</el-button
              >
            </el-col> -->
          </el-row>

          <template>
            <el-calendar style="width:1150px; height:500px;">
              <template slot="dateCell" slot-scope="{ data }">
                <div :class="data.isSelected ? 'is-selected' : ''">
                  {{
                    data.day
                      .split("-")
                      .slice(2)
                      .join("-")
                  }}
                  {{ data.isSelected ? handleCreateSport(data) : "" }}
                </div>
                <div v-for="item in calendarData">
                  <div
                    v-if="
                      item.months.indexOf(data.day.split('-').slice(1)[0]) != -1
                    "
                  >
                    <div
                      v-if="
                        item.days.indexOf(
                          data.day
                            .split('-')
                            .slice(2)
                            .join('-')
                        ) != -1
                      "
                    >
                      <el-tooltip
                        class="item"
                        effect="dark"
                        :content="item.things"
                        disabled
                      >
                        <div class="is-selected">{{ item.things }}</div>
                      </el-tooltip>
                    </div>
                    <div v-else></div>
                  </div>
                  <div v-else></div>
                </div>
              </template>
            </el-calendar>
          </template>
        </el-col>
      </el-row>
    </el-scrollbar>
  </div>
</template>

<script>
import { findResertion } from "@/api/Appointment/reserset";
import { listResourcePermission } from "@/api/resource";
import ResersetEdit from "@/components/Appointment/reserset/resersetEdit";
import RolePermission from "@/components/role/rolePermission";

export default {
  data() {
    return {
      calendarData: [],
      loading: false,
      monDayList: [],
      num: 1,
      monAndday: [{ mon: "", sun: "" }],

      permission: {
        add: false,
        edit: false,
        remove: false
      },
      search: {
        value: "",
        offset: 1,
        limit: 7
      },
      roleTotal: 0
    };
  },
  methods: {
    //预约设置
    getreservationList(ResetModel) {
      findResertion().then(response => {
        for (var zhi in response.data) {
          this.monDayList = response.data[zhi].tionApptime.split("-");
          this.monAndday.mon = this.monDayList[1];
          this.monAndday.sun = this.monDayList[2];
          this.calendarData.push({
            months: this.monAndday.mon,
            days: this.monAndday.sun,
            things: "可预约" + 10 + "人"
          });
          this.calendarData.push({
            months: this.monAndday.mon,
            days: this.monAndday.sun,
            things: "已预约" + this.num + "人"
          });
        }
      });
    },

    async pageInit() {
      this.getreservationList();
    },

    //预约设置
    handleCreateSport(data) {
      this.$refs.resersetEdit.$emit("openAddReservationDialog", data.day);
    },

    outputError(error) {
      console.log(error.response ? error.response : error.message);
      this.loading = false;
      this.$message({
        showClose: true,
        message: "出错了，请按F12查看浏览器日志。",
        type: "error"
      });
    }
  },
  components: { ResersetEdit, RolePermission },
  created() {
    this.pageInit();
  }
};
</script>

<style lang="scss" scoped>
.search-row {
  padding-bottom: 8px;
  .el-input {
    width: 260px;
  }
}
.is-selected {
  color: #1989fa;
}

.role-locked {
  color: red;
}
.role-not-locked {
  color: green;
}
</style>